<!DOCTYPE html>
<html>
<head>
    <title>Grand Share</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <!-- Main page in jQuery Mobile style -->
    <div data-role="page" id="main_page">
        <div data-role="header" data-theme="a">Grand Share</div>
        <div data-role="main" class="ui-content">
            <fb:login-button autologoutlink="true" scope="public_profile,email"></fb:login-button>
            {% if current_user %}
                <p>Hello, {{current_user.name}}</p>
                <a href="/register?user_id={{current_user.id}}&box_id={{box_id}}" data-role="button">Register RPi box {{box_id}}</a>
            {% endif %}
            <div id="fb-root"></div>
            <script>
                window.fbAsyncInit = function() {
                    FB.init({appId: '{{ facebook_app_id }}', status: true, cookie: true, xfbml: true});
                    FB.Event.subscribe('{% if current_user %}auth.logout{% else %}auth.login{% endif %}', function(response) {
                        {% if current_user %} window.location = "/logout" {% else %} window.location.reload(); {% endif %}
                    });
                };
                (function() {
                    var e = document.createElement('script');
                    e.type = 'text/javascript';
                    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
                    e.async = true;
                    document.getElementById('fb-root').appendChild(e);
                }());
            </script>
        </div>
        <div data-role="footer" data-theme="a">Thammasat University</div>
    </div>
</body>
</html>